<script setup>

</script>

<template>
  <view class="msg-container">
    <view class="msg-list" v-for="item in 20" :key="item">
      <view class="avatar">
        <image src="https://i.postimg.cc/x8KxXH3D/robot.webp" mode="aspectFill"></image>
      </view>
      <view class="msg-box">
        <text class="txt">
          12312312312312312312312312
        </text>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.msg-container {
 
  .msg-list {
    height: 75rpx;
    display: flex;
    align-items: center;
    padding: 40rpx 40rpx 10rpx 40rpx;
    // border-bottom: 1px solid #ddd;
    gap: 20rpx;
    .avatar {
      width: 75rpx;
      height: 75rpx;
        image {
            width: 100%;
            height: 100%;
            border-radius: 20px;
          }
    }
    .msg-box {
      height: 100%;
      display: flex;
      align-items: flex-end;
      // padding-bottom: 3rpx;
      .txt {
        font-size:30rpx;
        color: #999;
      }
    }
  }
}
</style>
